<template>
    <div>
        <el-alert v-if="showAlert"
                title="不能访问"
                type="error"
                description="还没有登录，请先登录!"
                show-icon>
        </el-alert>
        <el-container style="height: 700px; border: 1px solid #eee" v-if="show">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu router>
                    <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.isTrader">
                        <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
                        <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path"
                        :class="$route.path==item2.path?'is-active':''" v-if="item2.show">{{item2.name}}</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-avatar class="aaa" icon="el-icon-user-solid"></el-avatar>
                    <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{tradername}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a">查看</el-dropdown-item>
                            <el-dropdown-item command="e" divided>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer>
                    <p style="text-align: center;font-size: small">开发by计科187 1组</p>
                    <p style="text-align: center;font-size: small">© 2020-2021 OCP.COM 版权所有</p>
                </el-footer>
            </el-container>
        </el-container>
    </div>

</template>

<script>
    export default {
        methods:{
            handleCommand(command) {
                this.$cookie.delete('tradername');
                this.$message('成功退出！');
                this.$router.push({
                    path: '/traderLogin'
                })
            }
        },
        data(){
            return{
                tradername:null,
                show: true,
                showAlert: false
            }

        },
        created() {
            var traderName=this.$cookie.get('tradername');
            if(traderName!=null){
                this.tradername=traderName;
             } else {
                this.show=false;
                this.showAlert=true;
                this.$alert('请先登录', '您还未登录', {
                    confirmButtonText: '确定',
                });
                this.$router.push({
                    path: '/traderLogin'
                })
            }
        }
    }
</script>

<style scoped>
.aaa {
    position: relative;
    top: 15px;
}
</style>